<template>
  <Card style="width:100%" class="detail-content-layout mb16">
    <template #title>
      {{ $t('预算审批') }}
    </template>
    <template #extra>
      <div class="h-arrow-wrap" @click="toggle = !toggle">
        <i :class="{toggleActive:toggle}" class="iconfont zy-common-jiantou h-arrow-icon"></i>
      </div>
    </template>
    <transition name="slide-up">
      <div v-if="toggle">
        <approvalUsers span="12.5%" :list="bdgApprovalInfos" :activeCode.sync="activeCode"/>
        <Form ref="form" :model="form" :rules="rules" label-position="top">
          <Row :gutter="24">
            <Col span="6">
              <FormItem :label="$t('审批')" prop="approvalStatus">
                <Select
                    transfer
                    :disabled="disabled"
                    v-model="form.approvalStatus"
                    filterable
                    clearable
                    :placeholder="`${$t('common.selectInfo')}`"
                >
                  <Option v-for="(item,index) in approvalList" :key="index" :label="item.label" :value="item.value"/>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem :label="$t('备注')">
                <Input maxlength="200" :disabled="disabled" clearable type="text" v-model="form.remark"
                       :placeholder="$t('请输入')"></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem :label="$t('审批人')">
                <Input disabled clearable type="text" v-model="form.approvalByStr" :placeholder="$t('请输入')"></Input>
              </FormItem>
            </Col>
            <Col span="6" v-if="disabled">
              <FormItem :label="$t('审批时间')">
                <Input disabled clearable type="text" v-model="form.approvalTime" :placeholder="$t('请输入')"></Input>
              </FormItem>
            </Col>
            <!--            <Col span="6" class="autoHeight">-->
            <!--              <FormItem :label="$t('审批邮件')">-->
            <!--                <uploadFile key="22" :fileList="info.bdgapprovals" :disabled="disabled"-->
            <!--                            @change="(list)=>{form.bdgapprovals = list}"/>-->
            <!--              </FormItem>-->
            <!--            </Col>-->
          </Row>
        </Form>
      </div>
    </transition>
  </Card>
</template>

<script>
import approvalUsers from "@/views/devBasic/capex/components/approvalUsers";
import mixins from "@/views/devBasic/capex/components/mixins";

export default {
  name: "bdgApproval",
  components: {approvalUsers},
  mixins: [mixins],
  props: {
    info: {
      type: Object,
      default: () => {
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    approvalInfo: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    const validatorRemark = (rule, value, callback) => {
      if (!value && this.form.approvalStatus == 0) {
        callback(new Error(this.$t('请输入')));
      } else {
        callback();
      }
    }
    return {
      toggle: true,
      form: {},
      rules: {
        approvalStatus: [{required: true, type: "number", message: this.$t('请选择'), trigger: 'change'}],
        remark: [{type: "string", message: this.$t('请输入'), trigger: 'blur', validator: validatorRemark}],
      },
      bdgApprovalInfos: [],
      activeCode: ""
    }
  },
  created() {
    this.form.approvalByStr = this.userName
    const {bdgApprovalInfos} = this.info;
    this.bdgApprovalInfos = bdgApprovalInfos

    if (this.disabled) {
      const {approvalByStr, approvalTime, status, approvalRemark} = this.approvalInfo
      if (approvalTime)
        this.form = Object.assign(this.form, {
          remark: approvalRemark,
          approvalStatus: status,
          approvalByStr,
          approvalTime,
        })
      this.toggle = false
      this.$forceUpdate()
    }

  },
  methods: {
    async getParams() {
      const valid = await this.$refs.form.validate()
      if (valid) {
        const params = JSON.parse(JSON.stringify(this.form))
        if (this.activeCode)
          params.bdgProgressCode = this.activeCode
        return {
          ...params
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "./style";

</style>

